<template>
 <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row class="break" v-show="rowTagId">
          <el-breadcrumb separator="/">
          <el-breadcrumb-item >学科管理</el-breadcrumb-item>
          <el-breadcrumb-item class="subjectName" :to="{ path: '/subjects/list' }">{{rowtagName}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form ref="form" :inline="true" :model="nodeData" class="demo-form-inline">
              <el-form-item :label="$t('table.Directoryname')" prop="directoryName">
                <el-input v-model="directoryNames" size="small"></el-input>
              </el-form-item>
              <el-form-item :label="$t('table.state')" prop="state">
                <el-select size="small" v-model="states" placeholder="请选择">
                  <el-option label="禁用" value="0"></el-option>
                  <el-option label="启用" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="removeClick" size="small">{{$t('table.eliminate')}}</el-button>
                <el-button type="primary" @click="onSubmit" size="small">{{$t('table.search')}}</el-button>
              </el-form-item>
            </el-form>
            <div class="grid-content bg-purple"></div
          ></el-col>
          <el-col :span="6" class="right">
            <el-button type="text" @click="goBack" v-if="rowTagId" >
              <i class="el-icon-back"></i>
              <span>返回学科</span>
              </el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              class="el-btn"
              @click="addAdmin"
              size="small"
              >{{$t('table.Newdirectory')}}</el-button
            >
            <div class="grid-content bg-purple"></div
          ></el-col>
        </el-row>
        <!-- 消息提示 -->
        <el-alert :title="titleShow" type="info" show-icon> </el-alert>
        <!-- 表格 -->
        <el-table
          class="box"
          :data="tableData"
          style="width: 100%; margin-top: 20px"
          :header-cell-style="tabelStyle"
        >
          <el-table-column
            fixed
            prop="date"
           :label="$t('table.id')"
            type="index"
            width="100"
            :index="indexMethod"
          >
          </el-table-column>
          <el-table-column prop="subjectName" :label="$t('table.subject')">
          </el-table-column>
          <el-table-column prop="directoryName" :label="$t('table.Directoryname')"> </el-table-column>
          <el-table-column prop="username" :label="$t('table.creator')"> </el-table-column>
          <el-table-column prop="addDate" :label="$t('table.creatdate')">
            <template #default="{ row }">
              {{ formateTime(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" :label="$t('table.interview')"></el-table-column>
          <el-table-column
            prop="state"
            :label="$t('table.state')"
            :formatter="formatEmployment"
          >
            <!-- 状态是0或者1 -->
          </el-table-column>
          <el-table-column fixed="right" :label="$t('table.operation')">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="jinyong(scope.row.id)"
                >{{ scope.row.state === 0 ? "启用" : "禁用" }}</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state === 1"
                @click="edit(scope.row.id)"
                >{{$t('table.Edit')}}</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state === 1"
                @click="del(scope.row.id)"
                >{{$t('table.remove')}}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <!-- current-page表示的当前页 -->
        <!-- page-sizes:供我们下拉选择的页容量 -->
        <!-- pagesize:表示当前页容量（一般和page-sizes数组中的第一个值是对应的） -->
        <!-- layout：表示分页的样式展示 -->
        <!-- total表示的是一共有多少条数据 -->
        <!-- @size-change：当每页页容量发生变化时触发 -->
        <!-- @current-change ：页码发生变化时触发 -->
        <div
          class="block"
          style="
            height: 40px;
            margin-top: 30px;
            display: flex;
            justify-content: flex-end;
          "
        >
          <el-pagination
            background
            :current-page="page"
            :page-sizes="[2, 4, 6, 8, 10]"
            :page-size="pagesize"
            layout="sizes,prev, pager, next,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
      <tags-add
        :rowtagName="rowtagName"
        :dialogVisible.sync="dialogVisible"
        :title="title"
        ref="tagsEdit"
        v-loading="loading"
        :rowTagId="rowTagId"
      ></tags-add>
    </div>
 </div>
</template>

<script>

import {
  list as listDataApi,
  detail,
  remove,
  changeState
} from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants' // 枚举文件
import dayjs from 'dayjs'
import tagsAdd from '@/module-hmmm/components/directorys-add.vue'

export default {
  name: 'tags',
  components: {
    tagsAdd
  },
  data () {
    return {
      dialogVisible: false,
      total: 0, // 总条数
      page: 1, // 当前页
      pagesize: 6, // 每页多少条
      formInline: {
        user: '',
        region: ''
      },
      tableData: [], // 全部数据
      title: '',
      nodeData: {
        directoryName: '',
        state: ''
      },
      editID: '',
      loading: false,
      directoryNames: '',
      states: ''

    }
  },
  computed: {
    // 弹出信息
    titleShow () {
      return `数据一共${this.total}条`
    },
    rowTagId () {
      // this.push(`/你的地址?id=${学科id}`)
      return this.$route.query.id ? this.$route.query.id : null
    },
    rowtagName () {
      return this.$route.query.name ? this.$route.query.name : null
    }

  },
  created () {
    this.listData()
  },
  methods: {
    tabelStyle () {
      return {
        'border-bottom': '2px solid #e8e8e8',
        color: '#909399',
        backgroundColor: '#f4f4f4'
      }
    },

    // 清除
    removeClick () {
      this.$refs.form.resetFields()
      this.directoryNames = ''
      this.states = ''
    },
    // 搜索
    async  onSubmit () {
      // console.log(this.tableData)
      const { data } = await listDataApi({
        page: this.page,
        pagesize: this.pagesize,
        directoryName: this.directoryNames || null,
        state: this.states || null,
        subjectID: this.rowTagId || null
      })
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 禁用按鈕
    async jinyong (id) {
      const rowObj = this.tableData.find(item => item.id === id)

      rowObj.state = rowObj.state === 1 ? 0 : 1
      const { data: potsData } = await detail({ id: id })
      this.potsData = potsData
      // console.log(rowObj, potsData)
      // 按钮状态
      await changeState({ id: id, state: rowObj.state })
    },

    // 修改
    async edit (id) {
      this.loading = true
      const data = { id }
      this.title = '修改目录'
      // console.log(data)
      const { data: a } = await detail(data)

      const res = {
        id,
        subjectID: a.subjectID,
        directoryName: a.directoryName
      }
      // console.log(res)
      this.editID = a.id // 修改才有id
      this.nodeData = res
      this.dialogVisible = true // 先让数据请求到了，才弹出框，不让数据不渲染
      this.loading = false
    },
    // 刪除
    del (id) {
      const data = { id }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {})
        .then(async () => {
          // console.log(id)
          await remove(data)
          // console.log(res)
          this.$message.success('删除成功!')// 弹出提示
          this.listData()
        })
        .catch(() => {})
    },
    // 点击新增
    addAdmin () {
      this.title = '新增目录'
      this.dialogVisible = true
    },
    // tabol格式化信息 状态是0或者1
    formatEmployment (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // console.log(this.potsData.state)
      // 拿当前的返回值跟枚举的value比较拿到比较的结果
      const obj = status.find((item) => item.value === cellValue)
      return obj.label
    },
    // 时间格式修改
    formateTime (time) {
      // 拿到了时间修改格式
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    async listData () {
      const { data } = await listDataApi({
        page: this.page,
        pagesize: this.pagesize,
        subjectID: this.rowTagId
      })
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts // 总数
    },

    /**
     * 计算索引
     */
    indexMethod (index) {
      return (this.page - 1) * this.pagesize + index + 1
    },
    // 分页
    // 条数改变触发
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.page = 1 // 页容量每次发生变化都回到第一页重新开始
      this.listData()
    },
    // 翻页改变触发
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.listData()
    },
    // 返回学科
    goBack () {
      if (this.rowTagId) {
        this.$router.go(-1)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.span {
  cursor: pointer;
}
.break{
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #EBEEF5;
  margin-bottom: 20px;
}
.right{
  display: flex;
  justify-content: flex-end;
}
</style>
